<template>
  <!-- 添加或修改产品对话框 -->
  <el-dialog title="产品生命周期" :visible.sync="open" width="90%" append-to-body :close-on-click-modal="false" custom-class="dialogPadDiv" >
      <div style="height: 800px">
      <div style="height: 100%;width: 30%;float: left" >
        <el-scrollbar class="stdUnitScrollbarDiv" style="height: 100%;background-color:#545c64;" v-if="menuList.length>0">

          <el-table   :data="menuList" :show-header="false" default-expand-all
                     row-key="id" highlight-current-row
                     @row-click="clickMenu" row-class-name="treeTableRow"
                     :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
<!--            <el-table-column label="编码" align="center" prop="id" />-->
            <el-table-column label="名称" align="left" prop="name" >
              <template slot-scope="scope">
                <i v-if="scope.row.type===1" class="el-icon-location"></i>
                <span >{{ scope.row.name}}</span>
              </template>
            </el-table-column>
          </el-table>
<!--          <el-menu :default-openeds="openeds" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">-->
<!--            <el-submenu v-for="(menu,index) of menuList" :index="'I_'+menu.id">-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-location"></i>-->
<!--                <span @click="clickMenu(menu)">阶段{{menu.name}}</span>-->
<!--              </template>-->
<!--              <el-menu-item v-for="(item,index) of menu.children" :index="'I_'+item.id" @click="clickMenu(item)">-->
<!--                <span>{{item.name}}</span>-->
<!--              </el-menu-item>-->
<!--            </el-submenu>-->
<!--          </el-menu>-->
        </el-scrollbar>
      </div>
        <div style="height: 100%;width: 70%;;float: left">
          <product-consumables ref="productConsumablesRef" />
        </div>
      </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listProductInfo, getProductInfo, delProductInfo, addProductInfo, updateProductInfo, exportProductInfo } from "@/api/factor/productInfo";
import ProductConsumables from './productConsumables'
export default {
  name: "ProductStageForm",
  components:{
    ProductConsumables
  },
  data() {
    return {
      open: false,
      form: {},
      menuList:[],
      openeds:[],
    };
  },
  created() {
  },
  methods: {
    clickMenu(row, column, event){
      this.$refs.productConsumablesRef.checkStageItem(row);
    },
    handleShow(row) {
      this.reset();
      getProductInfo(row.id).then(response => {
        this.form = response.data;
        if(response.data.stageList){
            this.openeds = response.data.stageList.filter(item => item.parentId===0).map((item) => "I_"+item.id);
          this.menuList =  this.handleTree(response.data.stageList, "id", "parentId");
        }else {
          this.menuList=[];
          this.openeds=[]
        }
        this.open = true;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        status: null,
        orderNum: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        stageList:[],
      };
      this.resetForm("form");
      this.menuList=[];
    },


  }
};
</script>
<style lang="scss">

  .treeTableRow{
    background-color: #545c64 !important;
    color: #fff !important;
   .el-icon-arrow-right{
     color: #fff !important;
   }
    td{
      border-bottom:0 solid #dfe6ec  !important;
    }
  }

  .treeTableRow.current-row{
    color: rgb(255, 208, 75) !important;
    td{
      background-color: #545c64 !important;
    }
  }
  .treeTableRow:hover{
    background-color: #3d4349 !important;
    td{
      background-color: #3d4349 !important;
    }
  }

</style>
